
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../main.dart';
import '../util/timer_manager.dart';
import '../widget/device_name_widget.dart';


class HelpDetail extends StatefulWidget {
  const HelpDetail({Key? key}) : super(key: key);

  @override
  State<HelpDetail> createState() => _HelpDetailState();
}

class _HelpDetailState extends State<HelpDetail> {

  late String name;


  @override
  initState() {
    super.initState();
    name = Get.arguments;

    WidgetsBinding.instance.addPostFrameCallback((_){
      timer.startCountDown(CountDownMode.normal,(){
        Get.until((route) => route.isFirst);
      });
    });
  }

    _appBar(){
    return Container(
      width: double.infinity,
      height: 42.h,
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 20,right: 20).w,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          deviceNameWidget(),
          InkWell(
            onTap: (){

            },
            child:  Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text("",style: TextStyle(color: Colors.white,fontSize: 12.sp),)
              ],
            ),
          )

        ],
      ),
    );
  }


  _title(){
    return Container(
        margin: EdgeInsets.only(top: 20.h,left: 20.w,right: 20.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            InkWell(
              onTap: (){
                timer.cancel();
                Get.back();
              },
              child: Image.asset("assets/images/back.png",width:60.w,height:23.h, fit: BoxFit.fill,),
            ),

            Obx(() => Text("${timer.normalTime.value}s",style: TextStyle(color: Colors.white,fontSize: 12.sp),))
          ],
        )
    );
  }


  _image(name){
    if(name == 'step1'){
      return Container(
        margin: EdgeInsets.only(top: 20.h),
        child: Image.asset("assets/images/step1_detail.png",height: 394.h, width: 240.w, fit: BoxFit.fill,),
      );
    }
    if(name == 'step2'){
      return Container(
        margin: EdgeInsets.only(top: 20.h),
        child: Image.asset("assets/images/step2_detail.png",height: 468.h, width: 240.w, fit: BoxFit.fill,),
      );
    }
    if(name == 'step3'){
      return Container(
        margin: EdgeInsets.only(top: 20.h),
        child: Image.asset("assets/images/step3_detail.png",height: 324.h, width: 240.w, fit: BoxFit.fill,),
      );
    }
    if(name == 'step4'){
      return Container(
        margin: EdgeInsets.only(top: 20.h),
        child: Image.asset("assets/images/step4_detail.png",height: 339.h, width: 240.w, fit: BoxFit.fill,),
      );
    }
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage(
              "assets/images/bg.png",
            ),
          ),
        ),
        child: Column(
          children: [
            _appBar(),
            _title(),
            _image(name),
          ],
        ),
      ),
    );
  }
}

